<template>
  <div class="add">
    <DetailsFrom @addFn="addFn">
      <template>
        <div>
          <el-form ref="addForm" :model="addForm" label-position="top" :rules="addFormRules">
            <el-row>
              <el-col :span="6">
                <el-form-item label="货品编码" prop="code">
                  <el-input v-model="addForm.code" :disabled="true" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="货品类型" prop="goodsTypeId">
                  <el-select
                    v-model="addForm.goodsTypeId"
                    clearable
                    filterable
                    remote
                    placeholder="请输入关键词"
                    :remote-method="goodsMethod"
                  >
                    <el-option
                      v-for="item in goodsOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="货品名称" prop="name">
                  <el-input v-model="addForm.name" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="货品条码" prop="barCode">
                  <el-input v-model="addForm.barCode" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="货主" prop="ownerId">
                  <el-select
                    v-model="addForm.ownerId"
                    clearable
                    filterable
                    remote
                    placeholder="请输入关键词"
                    :remote-method="ownerMethod"
                    @change="ownerFn"
                  >
                    <el-option
                      v-for="item in ownerOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="质检方式" prop="inspectionType">
                  <el-select v-model="addForm.inspectionType" placeholder="请选择" clearable>
                    <el-option label="不质检" value="BCL" />
                    <el-option label="全检" value="QJ" />
                    <el-option label="抽检" value="CJ" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="温度类型" prop="temperatureType">
                  <el-select v-model="addForm.temperatureType" placeholder="请选择" clearable>
                    <el-option label="常温" value="CW" />
                    <el-option label="冷藏" value="LC" />
                    <el-option label="恒温" value="HW" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="承重要求" prop="bearingType">
                  <el-select v-model="addForm.bearingType" placeholder="请选择" clearable>
                    <el-option label="重型" value="ZX" />
                    <el-option label="中型" value="BX" />
                    <el-option label="轻型" value="QX" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="体积" prop="volume">
                  <el-input v-model="addForm.volume" placeholder="请输入" clearable>
                    <template slot="append">m³</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="指定库区" prop="areaId">
                  <el-select v-model="addForm.areaId" placeholder="请选择" clearable>
                    <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单价" prop="price">
                  <el-input v-model="addForm.price" placeholder="请输入" clearable>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位" prop="unit">
                  <el-input v-model="addForm.unit" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保质天数" prop="guaranteeDay">
                  <el-input v-model="addForm.guaranteeDay" placeholder="请输入" clearable>
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </detailsfrom>
  </div>
</template>

<script>
import { nextFn, searchGoods, addGoods, editGoods, goodsTypeVague, ownerVague, areaList } from '@/api'
import DetailsFrom from '@/components/DetailsFrom'
import { messageFn } from '@/utils/myutils'
export default {
  components: { DetailsFrom },
  data() {
    return {
      id: '',
      addForm: {},
      addFormRules: {
        goodsTypeId: [{ required: true, message: '请输入货品类型名称/货品类型编码', trigger: 'change' }],
        name: [{ required: true, message: '请输入货品名称', trigger: 'blur' }],
        barCode: [{ required: true, message: '请输入货品条码', trigger: 'blur' }],
        ownerId: [{ required: true, message: '请输入货主名称/编码', trigger: 'change' }],
        inspectionType: [{ required: true, message: '请输入质检方式', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '请输入温度类型', trigger: 'blur' }],
        bearingType: [{ required: true, message: '请输入承重要求', trigger: 'blur' }],
        volume: [{ required: true, message: '请输入体积', trigger: 'blur' }]
      },
      wareList: [],
      goodsList: [],
      goodsOption: [],
      ownerList: [],
      ownerOption: [],
      areaList: []
    }
  },
  // 组件路由首位 修改meta的名字
  beforeRouteEnter(to, from, next) {
    if (to.params.id === 'null') {
      to.meta.title = '新增货品'
    } else {
      to.meta.title = '修改货品'
    }
    next()
  },
  async created() {
    // 模糊
    const res2 = await goodsTypeVague('')
    const res1 = await ownerVague('')
    this.goodsList = res2.data.data
    this.ownerList = res1.data.data
    if (this.$route.params.id === 'null') {
      const res = await nextFn('HP')
      this.$set(this.addForm, 'code', res.data.data)
      this.$set(this.addForm, 'status', 0)
      this.$forceUpdate()
    } else {
      const { data: { data }} = await searchGoods(this.$route.params.id)
      await this.ownerFn(this.addForm.ownerId)
      console.log(data)
      data.ownerId = this.ownerList.find(item => item.id === data.ownerId).name
      data.areaId = this.areaList.find(item => item.id === data.areaId).name
      this.addForm = data
    }
  },
  methods: {
    addFn() {
      console.log(this.addForm)
      this.$refs.addForm.validate(async(valid) => {
        if (!valid) return
        let res
        if (this.addForm.id) {
          this.addForm.ownerId = this.ownerList.find(item => item.name === this.addForm.ownerId).id
          this.addForm.areaId = this.areaList.find(item => item.name === this.addForm.areaId).id
          console.log(this.addForm.areaId)
          res = await editGoods(this.addForm)
        } else {
          res = await addGoods(this.addForm)
        }
        messageFn(res.data.isSuccess, this.$route.meta.title)
        this.$router.push({ name: 'goods' })
      })
    },
    // 货主选择
    goodsMethod(query) {
      if (query !== '') {
        this.goodsOption = this.goodsList.filter(item => {
          if (item.code.includes(query) || item.name.includes(query)) {
            return item
          }
        })
      } else {
        this.addForm.goodsTypeId = ''
        this.options = []
      }
    },
    ownerMethod(query) {
      if (query !== '') {
        this.ownerOption = this.ownerList.filter(item => {
          if (item.code.includes(query) || item.name.includes(query)) {
            return item
          }
        })
      } else {
        this.addForm.ownerId = ''
        this.ownerOption = []
      }
    },
    async ownerFn(val) {
      console.log(val)
      const res = await areaList({ ownerId: val })
      this.areaList = res.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/my-form.scss';
</style>
